<template>
  <div class="about">
    <div>
      <p style="font-size:25px;color:black;font-weight:bold;">
        <span>{{ location.name }}</span>
        实时天气
      </p>
      <p>数据观测时间：{{ timeFormat }}</p>
    </div>
    <div>
      <p><i :class="iconName"></i></p>
      <p>温度：{{now.temp}}</p>
      <p>体感温度：{{now.feelsLike}}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { API_NOW,KEY } from "@/common/constrant"
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import "qweather-icons/font/qweather-icons.css"
export default {
  data(){
    return{
      now:{}
    }
  },
  computed:{
    ...mapState([
      "location"
    ]),
    timeFormat:function(){
      return dayjs(this.now.obsTime).format("YYYY年MM月DD日 HH时mm分")
    },
    iconName:function(){
      return "qi-" + this.now.icon
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    getData(){
      axios.get(API_NOW,{
        params:{
          key: KEY,
          location: this.location.id
        }
      }).then(res => {
        console.log(res.data)
        this.now = res.data.now
      })
    }
  },
  //侦听器
  watch:{
    location:function(){
    //监听到location属性有变化，重新调用getData()网络请求
    this.getData();
    }
  }
}
</script>

<style scoped>
i{
  color: rgb(88, 87, 84);
  font-size: 3rem;
}
</style>
